<template>
    <div class="alert-dialog ">
        <Cdialog :visible="showDialog" @closeDialog="changeVisible" title="设备面板" width="420">
            <div class="control-group">
                <div class="dialogheader">
                    <div class="eqInfo">
                        <div class="eqName fs16">
                            <span class="text fs16">设备名称：</span>{{ eqName }}
                        </div>
                        <div class="eqName fs16">
                            <span class="text fs16">设备位置：</span>{{ EqDetailStore.$state.location }}
                        </div>
                    </div>
                    <div class="eqStatus" :style="itemStatusStyle((<any>EqDetailStore.$state).estatus)">
                        {{ (<any>(<any>EqDetailStore.$state).estatus).status == 1 ? '在线' : '离线' }}
                    </div>
                </div>
                <div class="eqValue eqName fs16" v-for="(item, index) in eqValue">
                    <span class="text fs16">
                        {{ item.name }}：
                    </span>{{ item.value }}
                </div>
            </div>
        </Cdialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useEqDetailStore } from '../../stores/eqInfo'
const EqDetailStore = useEqDetailStore()
const showDialog = computed(() => {
    return EqDetailStore.$state.show
})
const changeVisible = (v: any) => {
    EqDetailStore.SetShow(v)
    handleMessage.value = ''
}
const eqName: any = computed(() => {
    return EqDetailStore.$state.eqName
})

const eqValue = computed(() => {
    return EqDetailStore.$state.infoItem
})
const itemStatusStyle: any = ((itemStatus: any) => {
    switch (itemStatus) {
        case '1':
            return 'color:rgba(47, 219, 85, 1);box-shadow: inset 0px 0px 8px 0px rgba(47,219,85,1);border-radius: 4px 4px 4px 4px;background: rgba(43,194,76,0.16);'
        case '0':

            return 'color:rgba(236, 60, 50, 1);box-shadow: inset 0px 0px 3px 0px rgba(236,60,50,1);border-radius: 4px 4px 4px 4px;background: rgba(219,54,44,0.16);'
    }
})
const handleMessage = ref('')

</script>

<style scoped lang="scss">
.control-group {

    .dialogheader {
        display: flex;

        .eqStatus {
            padding: 2px 6px;
            box-sizing: border-box;
            max-height: 24px;
            margin-left: auto;
            margin-top: auto;
            margin-bottom: auto;
        }
    }

    .control-item {
        padding: 8px;
        border-radius: 4px;
        margin-bottom: 8px;

        &:hover {
            border-color: var(--theme-blue-color);
        }

        .control-item-header {
            // display: flex;
            // align-items: center;
            // justify-content: space-between;

            .control-item-title {
                font-size: 16px;
            }
        }

        .control-item-form {
            margin-top: 14px;
        }
    }
}


.text {
    color: rgba(111, 186, 255, 1);
}

.eqName {
    margin-bottom: 8px;
    padding: 8px;
    box-sizing: border-box;
}

:deep(.el-input__wrapper) {
    background-color: rgba(27, 68, 148, 0.46) !important;
    border: 0 !important;
    box-shadow: none
}

:deep(.el-input__inner) {
    color: white !important;
    border: 0 !important;
}

:deep(.el-input) {
    color: black !important;
    border: 0 !important;

    .el-input__password {
        display: none;
    }
}
</style>